<template>
    <div style="width: 100%; height: 100vh; background-color: rgb(165, 199, 213); overflow: hidden;">
        <div style="width: 400px; margin: 100px auto;">
            <div style="color: black; font-size: 30px; text-align: center; padding: 50px 0;">欢迎登录家谱管理系统！</div>
            <el-form  ref="form" :model="form" size="large" :rules="rules" label-position="right" label-width="100px">
                <el-form-item prop="user_id" label="用户id">
                    <el-input v-model="form.user_id" placeholder="请输入用户id"/>
                </el-form-item>
                <el-form-item prop="password" label="密码">
                    <el-input v-model="form.password" show-password placeholder="请输入密码"/>
                </el-form-item>
                <el-form-item>
                    <el-button style="width: 100%;" @click="login">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
    
    
<script>
    
import request from '@/utils/request';    

export default{

    name:"Login",

    data(){
        return{
            form:{},

            rules :{
                user_id: [
                 { required: true, message: '请输入用户id', trigger: 'blur' },
                      ],
                password: [
                 { required: true, message: '请输入密码', trigger: 'blur' },
                      ],
            }
        }
    },

    methods:{
        login(){
            this.$refs['form'].validate((valid) => {
                if(valid){
                    request.post("/user/login", this.form).then(res => {
                if(res.code === '0'){
                    this.$message({
                        type:"success",
                        message:"登录成功"
                    })
                    this.$router.push("/event")//登录成功跳转到该界面
                }
                else{
                    this.$message({
                        type:"error",
                        message:"登录失败"
                    })
                }
          })
                }
            })

        }
    }

}
    
</script>
    
    
<style scoped>
    
</style>
    